<template>
  <div class="app-container">
    <h2 style="text-align:center;">发布新课程</h2>
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom:40px;"
    >
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <el-form :model="courseInfo" ref="form" label-width="80px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title"></el-input>
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select
          v-model="courseInfo.subjectParentId"
          @change="selectOneSubject"
          placeholder="一级分类"
        >
          <el-option
            v-for="item in oneSubjectList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option
            v-for="item in twoSubjectList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择讲师">
          <el-option
            v-for="item in teacherList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总课时">
        <el-input-number
          v-model="courseInfo.lessonNum"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="课程简介">
        <!-- <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="courseInfo.description"
        >
        </el-input> -->
        <quill-editor
          ref="myQuillEditor"
          :options="{ placeholder: '请输入内容' }"
          v-model="courseInfo.description"
        />
      </el-form-item>
      <el-form-item label="课程封面">
        <el-upload
          class="avatar-uploader"
          :action="BASE_API + '/eduoss/fileoss/avatar'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程价格">
        <el-input-number
          v-model="courseInfo.price"
          controls-position="right"
        ></el-input-number
        >元
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  addCourseInfo,
  getCourseInfoById,
  updateCourseInfo
} from '@/api/edu/course'
import { getAllTeacher } from '@/api/edu/teacher'
import { getAllSubject } from '@/api/edu/subject'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'CourseInfo',
  components: {
    quillEditor
  },
  data() {
    return {
      courseInfo: {
        title: '', // 标题
        teacherId: '', // 讲师id
        subjectId: '', // 课程分类id
        subjectParentId: '', // 课程分类父id
        lessonNum: 0, // 总课时
        description: '', // 课程简介
        cover: '', // 封面
        price: 0 // 课程价格
      },
      teacherList: [], // 讲师列表
      oneSubjectList: [], // 一级分类列表
      twoSubjectList: [], // 二级分类列表
      imageUrl: '', // 图片地址
      BASE_API: process.env.VUE_APP_BASE_API // 基准路径
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      // 修改
      this.getCourseInfo()
    } else {
      // 新增
      this.getAllTeacherData()
      this.getAllSubjectData()
    }
  },
  methods: {
    async getCourseInfo() {
      const res = await getCourseInfoById(this.$route.params.id)

      this.courseInfo = res.data.courseInfo
      this.imageUrl = res.data.courseInfo.cover
      this.getAllTeacherData()
      this.getAllSubjectData()
    },
    async onSubmit() {
      if (this.$route.params && this.$route.params.id) {
        // 修改
        const res = await updateCourseInfo(this.courseInfo)

        this.$message({
          type: 'success',
          message: '修改成功~'
        })

        this.$router.push(`/edu/course/chapter/${this.$route.params.id}`)
      } else {
        // 新增
        const res = await addCourseInfo(this.courseInfo)

        this.$message({
          type: 'success',
          message: '添加成功~'
        })

        this.$router.push(`/edu/course/chapter/${res.data.courseId}`)
      }
    },
    // 获取所有讲师
    async getAllTeacherData() {
      const res = await getAllTeacher()

      this.teacherList = res.data.items
    },
    // 获取分类
    async getAllSubjectData() {
      const res = await getAllSubject()

      this.oneSubjectList = res.data.list

      // 修改的时候，给二级分类赋值
      if (this.$route.params && this.$route.params.id) {
        for (let i = 0; i < this.oneSubjectList.length; i++) {
          const oneSubject = this.oneSubjectList[i]
          if (oneSubject.id === this.courseInfo.subjectParentId) {
            this.twoSubjectList = oneSubject.children
          }
        }
      }
    },
    // 选中了一级分类
    selectOneSubject(val) {
      for (var i = 0; i < this.oneSubjectList.length; i++) {
        const oneSubject = this.oneSubjectList[i]

        if (oneSubject.id === val) {
          this.twoSubjectList = oneSubject.children

          this.courseInfo.subjectId = ''
        }
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data.url

      this.courseInfo.cover = res.data.url
    },
    beforeAvatarUpload(file) {
      const isImage =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isImage && isLt2M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.ql-editor {
  height: 200px;
}
</style>
